Comportamiento de desplazamiento CSS: Una guía completa para el desplazamiento suave

En el panorama actual del desarrollo web, la experiencia del usuario (UX) reina. Un detalle aparentemente pequeño que puede impactar significativamente la UX es la suavidad del desplazamiento. ¡Se acabaron los saltos bruscos entre secciones! La propiedad scroll-behavior de CSS ofrece una forma simple pero poderosa de implementar el desplazamiento suave, mejorando la accesibilidad del sitio web y la satisfacción general del usuario. Esta guía proporciona una exploración completa de scroll-behavior, que cubre todo, desde la implementación básica hasta la personalización avanzada y las consideraciones de compatibilidad del navegador para una audiencia verdaderamente global.

¿Qué es el comportamiento de desplazamiento CSS?

La propiedad scroll-behavior en CSS le permite especificar el comportamiento de desplazamiento para un cuadro de desplazamiento. De forma predeterminada, el desplazamiento es instantáneo, lo que resulta en saltos abruptos al navegar entre diferentes partes de una página. scroll-behavior: smooth; cambia esto, proporcionando una transición suave y animada cuando se activa el desplazamiento, ya sea haciendo clic en un enlace de anclaje, usando las teclas de flecha o iniciando programáticamente un desplazamiento.

Implementación básica de scroll-behavior: smooth;

La forma más sencilla de habilitar el desplazamiento suave es aplicar la propiedad scroll-behavior: smooth; al elemento html o body. Esto hace que todo el desplazamiento dentro de la ventana gráfica sea suave.

Aplicación al elemento html:

Este es generalmente el método preferido, ya que afecta el comportamiento de desplazamiento de toda la página.

            html {
  scroll-behavior: smooth;
}

            

              
                Copy
              
            
          

Aplicación al elemento body:

Este método también funciona, pero es menos común porque solo afecta el contenido dentro del body.

            body {
  scroll-behavior: smooth;
}

            

              
                Copy
              
            
          

Ejemplo: Imagine una página web simple con varias secciones identificadas por encabezados. Cuando un usuario hace clic en un enlace de navegación que apunta a una de estas secciones, en lugar de saltar inmediatamente a esa sección, la página se desplazará suavemente hacia ella.

Desplazamiento suave con enlaces de anclaje

Los enlaces de anclaje (también conocidos como identificadores de fragmentos) son una forma común de navegar dentro de una página web. Generalmente se utilizan en tablas de contenido o sitios web de una sola página. Con scroll-behavior: smooth;, hacer clic en un enlace de anclaje activa una animación de desplazamiento suave.

Estructura HTML para enlaces de anclaje:

            


  
Sección 1
  
Contenido de la sección 1...



  
Sección 2
  
Contenido de la sección 2...



  
Sección 3
  
Contenido de la sección 3...


            

              
                Copy
              
            
          

Con la regla CSS html { scroll-behavior: smooth; } en su lugar, hacer clic en cualquiera de los enlaces de la navegación dará como resultado una animación de desplazamiento suave a la sección correspondiente.

Orientación de elementos desplazables específicos

También puede aplicar scroll-behavior: smooth; a elementos desplazables específicos, como divs con overflow: auto; o overflow: scroll;. Esto le permite habilitar el desplazamiento suave dentro de un contenedor en particular sin afectar al resto de la página.

Ejemplo: Desplazamiento suave en un Div:

            

  
Mucho contenido aquí...
  
Más contenido...
  
Aún más contenido...


            

              
                Copy
              
            
          

            .scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

            

              
                Copy
              
            
          

En este ejemplo, solo el contenido dentro de .scrollable-container se desplazará suavemente.

Desplazamiento suave programático con JavaScript

Si bien scroll-behavior: smooth; maneja el desplazamiento activado por la interacción del usuario (como hacer clic en los enlaces de anclaje), es posible que deba iniciar el desplazamiento programáticamente usando JavaScript. Los métodos scrollTo() y scrollBy(), cuando se combinan con la opción behavior: 'smooth', brindan una forma de lograr esto.

Usando scrollTo():

El método scrollTo() desplaza la ventana a una coordenada específica.

            window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

            

              
                Copy
              
            
          

Este código desplazará suavemente la ventana a un desplazamiento vertical de 500 píxeles desde la parte superior.

Usando scrollBy():

El método scrollBy() desplaza la ventana por una cantidad especificada.

            window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

            

              
                Copy
              
            
          

Este código desplazará suavemente la ventana hacia abajo en 100 píxeles.

Ejemplo: Desplazamiento suave a un elemento al hacer clic en un botón:

            Desplazarse a la Sección 3


  
Sección 3
  
Contenido de la sección 3...


            

              
                Copy
              
            
          

            const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

            

              
                Copy
              
            
          

Cuando se hace clic en el botón, la página se desplazará suavemente al elemento "Sección 3" usando scrollIntoView(). Este método a menudo se prefiere, ya que calcula la posición precisa del elemento de destino, independientemente de los cambios de contenido dinámicos.

Personalización de la velocidad y el easing del desplazamiento

Si bien scroll-behavior: smooth; proporciona una animación de desplazamiento suave predeterminada, no puede controlar directamente la velocidad o el easing (la tasa de cambio de la animación a lo largo del tiempo) usando solo CSS. La personalización requiere JavaScript.

Nota importante: Las animaciones demasiado largas o complejas pueden ser perjudiciales para la UX, lo que podría causar mareos o dificultar la interacción del usuario. Esfuércese por lograr animaciones sutiles y eficientes.

Personalización basada en JavaScript:

Para personalizar la velocidad y el easing del desplazamiento, debe usar JavaScript para crear una animación personalizada. Esto generalmente implica el uso de bibliotecas como GSAP (GreenSock Animation Platform) o la implementación de su propia lógica de animación usando requestAnimationFrame.

Ejemplo usando requestAnimationFrame:

            function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Función de easing (por ejemplo, easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Ejemplo de uso:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milisegundos
smoothScroll(targetElement, scrollDuration);

            

              
                Copy
              
            
          

Este código define una función smoothScroll que toma un elemento de destino y una duración como entrada. Utiliza requestAnimationFrame para crear una animación suave e incluye una función de easing (easeInOutQuad en este ejemplo) para controlar el ritmo de la animación. Puede encontrar muchas funciones de easing diferentes en línea para lograr varios efectos de animación.

Consideraciones de accesibilidad

Si bien el desplazamiento suave puede mejorar la UX, es fundamental considerar la accesibilidad. Algunos usuarios pueden encontrar el desplazamiento suave distractor o incluso desorientador. Proporcionar una forma de deshabilitar el desplazamiento suave es esencial para la inclusión.

Implementación de una preferencia de usuario:

El mejor enfoque es respetar las preferencias del sistema operativo del usuario para reducir el movimiento. Las consultas de medios como prefers-reduced-motion le permiten detectar si el usuario ha solicitado una reducción de movimiento en la configuración de su sistema.

Usando prefers-reduced-motion:

            @media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Invalidar el desplazamiento suave */
  }
}

            

              
                Copy
              
            
          

Este código deshabilita el desplazamiento suave si el usuario ha habilitado la configuración "reducir movimiento" en la configuración de su sistema operativo. La bandera !important se usa para garantizar que esta regla anule cualquier otra declaración de scroll-behavior.

Proporcionar una palanca manual:

También puede proporcionar una palanca manual (por ejemplo, una casilla de verificación) que permita a los usuarios habilitar o deshabilitar el desplazamiento suave. Esto les da a los usuarios un control más directo sobre su experiencia.

            
  
  Habilitar el desplazamiento suave


            

              
                Copy
              
            
          

            const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

            

              
                Copy
              
            
          

Este código agrega una casilla de verificación que permite a los usuarios activar o desactivar el desplazamiento suave. Recuerde persistir esta preferencia del usuario (por ejemplo, usando almacenamiento local) para que se recuerde en todas las sesiones.

Compatibilidad del navegador

scroll-behavior tiene buena compatibilidad con el navegador, pero es esencial ser consciente de los navegadores más antiguos que podrían no ser compatibles. Aquí hay un resumen de la compatibilidad del navegador:

• Chrome: Compatible desde la versión 61
• Firefox: Compatible desde la versión 36
• Safari: Compatible desde la versión 14.1 (compatibilidad parcial en versiones anteriores)
• Edge: Compatible desde la versión 79
• Opera: Compatible desde la versión 48
• Internet Explorer: No compatible

Proporcionar una alternativa para navegadores más antiguos:

Para los navegadores que no son compatibles con scroll-behavior, puede usar un polyfill de JavaScript. Un polyfill es un fragmento de código que proporciona la funcionalidad de una función más reciente en navegadores más antiguos.

Ejemplo: Uso de un Polyfill:

Hay varias bibliotecas de JavaScript disponibles que proporcionan polyfills de desplazamiento suave. Una opción es usar una biblioteca como "smoothscroll-polyfill".

            


            

              
                Copy
              
            
          

Este código incluye la biblioteca "smoothscroll-polyfill" y la inicializa. Esto proporcionará la funcionalidad de desplazamiento suave en navegadores más antiguos que no son compatibles de forma nativa con scroll-behavior.

Carga condicional: Considere la carga condicional del polyfill utilizando un cargador de secuencias de comandos o la detección de funciones para evitar la sobrecarga innecesaria en los navegadores modernos.

Mejores prácticas para el desplazamiento suave

Aquí hay algunas prácticas recomendadas que debe tener en cuenta al implementar el desplazamiento suave:

• Manténgalo sutil: Evite animaciones demasiado largas o complejas que puedan distraer o causar mareos.
• Considere la accesibilidad: Proporcione una forma para que los usuarios deshabiliten el desplazamiento suave si lo encuentran desorientador. Respete las preferencias del usuario para reducir el movimiento.
• Pruebe en diferentes dispositivos: Asegúrese de que el desplazamiento suave funcione bien en diferentes dispositivos y tamaños de pantalla.
• Optimice el rendimiento: Evite activar animaciones de desplazamiento suave en exceso, ya que esto puede afectar el rendimiento.
• Use enlaces de anclaje significativos: Asegúrese de que los enlaces de anclaje apunten a secciones claramente definidas en la página.
• Evite la superposición de contenido: Tenga en cuenta los encabezados fijos u otros elementos que puedan superponerse al destino del desplazamiento. Use propiedades CSS como scroll-padding-top o JavaScript para ajustar la posición de desplazamiento en consecuencia.

Problemas comunes y soluciones

Aquí hay algunos problemas comunes que puede encontrar al implementar el desplazamiento suave y sus soluciones:

• Problema: El desplazamiento suave no funciona.
  • Solución: Verifique que scroll-behavior: smooth; se aplique al elemento html o body. Asegúrese de que los enlaces de anclaje apunten correctamente a las secciones correspondientes. Verifique que no haya reglas CSS en conflicto que anulen la propiedad scroll-behavior.
• Problema: El desplazamiento suave es demasiado lento o demasiado rápido.
  • Solución: Personalice la velocidad de desplazamiento usando JavaScript, como se describe en la sección "Personalización de la velocidad y el easing del desplazamiento". Experimente con diferentes funciones de easing para encontrar el equilibrio adecuado entre suavidad y capacidad de respuesta.
• Problema: El encabezado fijo se superpone al destino del desplazamiento.
  • Solución: Use la propiedad scroll-padding-top en CSS para agregar relleno a la parte superior del contenedor de desplazamiento. Alternativamente, use JavaScript para calcular la altura del encabezado fijo y ajustar la posición de desplazamiento en consecuencia.
• Problema: El desplazamiento suave interfiere con otras funcionalidades de JavaScript.
  • Solución: Asegúrese de que su código JavaScript no entre en conflicto con la animación de desplazamiento suave. Use oyentes de eventos y devoluciones de llamada para coordinar la ejecución de diferentes funciones de JavaScript.

Técnicas y consideraciones avanzadas

Más allá de lo básico, existen varias técnicas y consideraciones avanzadas para mejorar su implementación de desplazamiento suave.

Uso de scroll-margin y scroll-padding:

Estas propiedades CSS proporcionan un control más preciso sobre el comportamiento de ajuste de desplazamiento y ayudan a evitar que el contenido sea oscurecido por encabezados o pies de página fijos.

• scroll-margin: Define el margen alrededor del área de ajuste de desplazamiento.
• scroll-padding: Define el relleno alrededor del área de ajuste de desplazamiento.

Ejemplo:

            section {
  scroll-margin-top: 20px; /* Agrega un margen de 20px encima de cada sección al desplazarse */
}

html {
  scroll-padding-top: 60px; /* Agrega un relleno de 60px en la parte superior de la ventana gráfica al desplazarse */
}

            

              
                Copy
              
            
          

Combinación con la API de Intersection Observer:

La API de Intersection Observer le permite detectar cuándo un elemento entra o sale de la ventana gráfica. Puede usar esta API para activar animaciones de desplazamiento suave basadas en la visibilidad de los elementos.

Ejemplo:

            const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Haz algo cuando la sección esté en vista
      console.log('La Sección ' + entry.target.id + ' está en vista');
    } else {
      // Haz algo cuando la sección esté fuera de vista
      console.log('La Sección ' + entry.target.id + ' está fuera de vista');
    }
  });
}, {
  threshold: 0.5 // Activar cuando el 50% del elemento sea visible
});

sections.forEach(section => {
  observer.observe(section);
});

            

              
                Copy
              
            
          

Este código usa la API de Intersection Observer para detectar cuándo cada sección entra o sale de la ventana gráfica. Luego, puede usar esta información para activar animaciones de desplazamiento suave personalizadas u otros efectos visuales.

Perspectivas globales sobre el comportamiento de desplazamiento

Si bien la implementación técnica del desplazamiento suave sigue siendo consistente a nivel mundial, las consideraciones culturales y contextuales pueden influir en su usabilidad percibida.

• Velocidad de Internet: En regiones con conexiones a Internet más lentas, las bibliotecas JavaScript grandes para animaciones personalizadas pueden afectar negativamente los tiempos de carga y la UX. Priorice las soluciones livianas y la carga condicional.
• Capacidades del dispositivo: Optimice para una amplia gama de dispositivos, desde computadoras de escritorio de alta gama hasta teléfonos móviles de baja potencia. Pruebe a fondo en diferentes dispositivos y tamaños de pantalla.
• Estándares de accesibilidad: Adhiérase a los estándares de accesibilidad internacionales como WCAG (Pautas de accesibilidad al contenido web) para garantizar la inclusión para usuarios con discapacidades.
• Expectativas del usuario: Si bien el desplazamiento suave generalmente es bien recibido, tenga en cuenta las posibles diferencias culturales en las expectativas del usuario con respecto a la animación y el movimiento. Pruebe con diversos grupos de usuarios para recopilar comentarios.

Conclusión

scroll-behavior: smooth; es una valiosa propiedad CSS que puede mejorar significativamente la experiencia del usuario de su sitio web. Al comprender su implementación básica, las opciones de personalización, las consideraciones de accesibilidad y la compatibilidad del navegador, puede crear una experiencia de navegación fluida y agradable para los usuarios de todo el mundo. Recuerde priorizar la accesibilidad, optimizar el rendimiento y realizar pruebas exhaustivas para garantizar que su implementación de desplazamiento suave satisfaga las necesidades de todos sus usuarios. Siguiendo las pautas y las mejores prácticas descritas en esta guía, puede dominar el desplazamiento suave y crear un sitio web que sea visualmente atractivo y fácil de usar para una audiencia global.